<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="script/vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-dtf>
    </div>
    <script>
        //全局自定义指令
        /*
        <input type='text' v-dtf>
        参数1：创建指令的名称，定义的时候不需要加v-，但是使用的时候必须加上v-前缀
        参数2：JSON对象，定义相关的钩子函数（代表指令创建的几个阶段）

        */
        Vue.directive('dtf', {
            //el参数：element元素，el就是自定义指令要操作的标记，每一个el对象，都是一个JS原生对象
            bind: function(el) {
                //指令第一次绑定元素时调用，bind函数只执行一次
                console.log('bind钩子函数执行')
                el.style.color = 'red' //设置文本框标记的文字颜色为红色

            },
            inserted: function(el) {
                //标记插入dom中的时候，立即执行这个函数，inserted函数只执行一次
                console.log('inserted钩子函数执行')
                    //设置文本框自动获得焦点
                el.focus() //调用focus()方法让文本框获得焦点，因为focus()方法只能自DOM中才可以调用，所以获得焦点必须写在inserted钩子函数中

            },
            update: function(el) {
                //update钩子函数 标记更新的时候，会触发该函数，标记的内容可以更新多次，该函数也会被执行多次
            },
        })



        Vue.config.productionTip = false //关闭生成信息提示
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            filters: {},
            directives: {
                //私有自定义指令，可以声明多个
                //key（自定义指令名称）：value
                err: function(el) {
                    el.style.color = 'red'
                }
            }
        })
    </script>
</body>

</html>